<template>
	<view class="register-container">
		<view class="header">
			<text class="app-name">注册</text>
		</view>
		
		<view class="form-container">
			<view class="input-group">
				<view class="phone-input">
					<text class="country-code">+86</text>
					<input 
						class="input-field" 
						type="number" 
						v-model="registerForm.phone" 
						placeholder="请输入手机号"
						maxlength="11"
					/>
				</view>
			</view>
			
			<view class="input-group">
				<view class="code-input">
					<input 
						class="input-field" 
						type="number" 
						v-model="registerForm.verifyCode" 
						placeholder="请输入验证码"
						maxlength="6"
					/>
					<text class="send-code-btn" @click="sendVerifyCode">{{ codeText }}</text>
				</view>
			</view>
			
			<button class="register-btn" @click="handleRegister" :disabled="!canRegister">注册</button>
			
			<view class="footer-links">
				<text class="link-text" @click="goToLogin">账号登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					registerForm: {
						phone: '',
						verifyCode: ''
					},
					codeTimer: 0,
					codeText: '发送验证码'
				}
			},
			computed: {
				canRegister() {
					return this.registerForm.phone.trim() && 
						   this.registerForm.verifyCode.trim()
				}
			},
		methods: {
				validateForm() {
					// 验证手机号
					const phoneReg = /^1[3-9]\d{9}$/
					if (!phoneReg.test(this.registerForm.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
						return false
					}
					
					// 验证验证码
					if (this.registerForm.verifyCode.length !== 6) {
						uni.showToast({
							title: '请输入6位验证码',
							icon: 'none'
						})
						return false
					}
					
					return true
				},
				
				sendVerifyCode() {
					if (this.codeTimer > 0) {
						return
					}
					
					// 验证手机号
					const phoneReg = /^1[3-9]\d{9}$/
					if (!phoneReg.test(this.registerForm.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
						return
					}
					
					// 模拟发送验证码
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})
					
					// 开始倒计时
					this.codeTimer = 60
					const timer = setInterval(() => {
						this.codeTimer--
						this.codeText = `${this.codeTimer}s后重发`
						if (this.codeTimer <= 0) {
							clearInterval(timer)
							this.codeText = '发送验证码'
						}
					}, 1000)
				},
			
			handleRegister() {
				if (!this.canRegister) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				
				if (!this.validateForm()) {
					return
				}
				
				// 显示加载中
				uni.showLoading({
					title: '注册中...'
				})
				
				// 模拟注册请求
				setTimeout(() => {
					uni.hideLoading()
					
					// 模拟注册成功
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					})
					
					// 保存用户信息到本地存储（实际项目中应该保存到服务器）
					const users = uni.getStorageSync('users') || []
					users.push({
						phone: this.registerForm.phone,
						registerTime: new Date().getTime()
					})
					uni.setStorageSync('users', users)
					
					// 跳转到登录页
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}, 1500)
			},
			
			goToLogin() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.register-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #4A90E2 0%, #7B68EE 100%);
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	
	.header {
		padding: 300rpx 60rpx 80rpx;
		text-align: left;
	}
	
	.app-name {
		font-size: 56rpx;
		color: #ffffff;
		font-weight: bold;
	}
	
	.form-container {
		flex: 1;
		background: #ffffff;
		border-radius: 40rpx 40rpx 0 0;
		padding: 80rpx 60rpx 60rpx;
		position: relative;
	}
	
	.input-group {
		margin-bottom: 40rpx;
		position: relative;
	}
	
	.phone-input {
		display: flex;
		align-items: center;
		border: 2rpx solid #f0f0f0;
		border-radius: 16rpx;
		padding: 0 30rpx;
		height: 100rpx;
		background: #f8f9fa;
	}
	
	.country-code {
		font-size: 32rpx;
		color: #333333;
		margin-right: 20rpx;
		font-weight: 500;
	}
	
	.phone-input .input-field {
		flex: 1;
		border: none;
		background: transparent;
		height: auto;
		padding: 0;
		font-size: 32rpx;
	}
	
	.code-input {
		display: flex;
		align-items: center;
		border: 2rpx solid #f0f0f0;
		border-radius: 16rpx;
		padding: 0 30rpx;
		height: 100rpx;
		background: #f8f9fa;
	}
	
	.code-input .input-field {
		flex: 1;
		border: none;
		background: transparent;
		height: auto;
		padding: 0;
		font-size: 32rpx;
	}
	
	.send-code-btn {
		font-size: 28rpx;
		color: #4A90E2;
		white-space: nowrap;
		margin-left: 20rpx;
	}
	
	.input-field {
		color: #333333;
		box-sizing: border-box;
	}
	
	.input-field:focus {
		outline: none;
	}
	
	.register-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(135deg, #4A90E2 0%, #7B68EE 100%);
		color: #ffffff;
		border: none;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 60rpx;
		margin-bottom: 40rpx;
	}
	
	.register-btn:disabled {
		background: #cccccc;
		color: #999999;
	}
	
	.footer-links {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}
	
	.link-text {
		font-size: 28rpx;
		color: #666666;
		text-decoration: underline;
	}
</style>